<template>
	<image :src="imgURL3+'me/me/bgay.png'" mode="widthFix" style="width: 100%;position: relative;"></image>
	<view @click="returnTo" style="position: absolute;margin-top:-100px;z-index: 9;"><uni-icons type="left" size="30"
			color="#ffffff"></uni-icons></view>
	<view
		style="width: 100%;min-height: 500px; background-color:#fff;margin-top: -20px;border-radius:10px 10px 0px 0px; position: absolute;">
		<view style="width: 100%;padding: 20px;">
			<view style="display: flex;justify-content: center;">
				<image :src="imgURL3+'me/me/penpor.png'" style="width: 30px;height: 30px;"></image>
				<view style="margin: 5px;">志愿申请</view>
			</view>
			<uni-forms ref="formRole" :modelValue="formData" :rules="rules" label-position="top">

				<uni-forms-item label="个人姓名" name="name" :required='true'>
					<!-- <teleport v-slot:label>姓名吧</teleport> -->
					<view style="width: 100%;height: 30px;border-bottom: 1px solid #FBD2D6; ">
						<input style="" v-model="formData.name" class="input" type="text" placeholder="请输入个人姓名" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="phone" :required='true'>
					<view style="width: 100%;height: 35px;border-bottom: 1px solid #FBD2D6; padding-bottom: 10px;">
						<input style="" v-model="formData.phone" class="input" type="text" placeholder="请输入联系电话" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="志愿队伍" name="teamId" :required='true'>
					<view style="width: 100%;border-bottom: 1px solid #FBD2D6; padding-bottom: 10px;">
						<!-- <input style="" v-model="formData.Contactaddress" class="input" type="text" placeholder="请输入联系地址"/> -->
						<view>
							<view v-if="isApply">
								<view v-for="item in formData.teamList">{{item}}</view>
							</view>
							<ba-tree-picker v-else ref="treePicker" :multiple='true' @select-change="selectChange"
								title="请选择志愿队伍" :localdata="site_list" valueKey="pkId" textKey="teamName"
								childrenKey="children" :selectParent="false" />
							<!-- <zxz-uni-data-select multiple v-model="formData.teamList" :localdata="team"
								@change="changelandscape"></zxz-uni-data-select> -->

						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="工作单位" name="workstate">
					<view style="width: 100%;height: 35px;border-bottom: 1px solid #FBD2D6; padding-bottom: 10px;">
						<input style="" v-model="formData.workstate" class="input" type="text" placeholder="请输入工作单位" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="联系地址" name="Contactaddress">
					<view style="width: 100%;height: 35px;border-bottom: 1px solid #FBD2D6; padding-bottom: 10px;">
						<input style="" v-model="formData.Contactaddress" class="input" type="text"
							placeholder="请输入联系地址" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="特长描述" name="forte">
					<view style="width: 100%;height: 35px;border-bottom: 1px solid #FBD2D6; padding-bottom: 10px;">
						<input style="" v-model="formData.forte" class="input" type="text" placeholder="请输入特长描述" />
					</view>
				</uni-forms-item>
				<!-- 				<uni-forms-item label="剩余工时" name="workHour" >
					<view style="width: 100%;height: 35px;border-bottom: 1px solid #FBD2D6; padding-bottom: 10px;">
						<input style="" v-model="formData.workHour" class="input" type="number" placeholder="请输入剩余工时" />
					</view>
				</uni-forms-item> -->
				<uni-forms-item label="政治面貌" name="landscape">
					<view style="width: 100%;height: 35px;border-bottom: 1px solid #FBD2D6; padding-bottom: 10px;">
						<!-- <input style="" v-model="formData.Contactaddress" class="input" type="text" placeholder="请输入联系地址"/> -->
						<view>
							<uni-data-select v-model="formData.landscape" :localdata="range"
								@change="changelandscape"></uni-data-select>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="性别" name="sex">
					<view style="width: 100%;height: 35px;border-bottom: 1px solid #FBD2D6; padding-bottom: 10px;">
						<!-- <input style="" v-model="formData.Contactaddress" class="input" type="text" placeholder="请输入联系地址"/> -->
						<view>
							<uni-data-select v-model="formData.sex" :localdata="sexrange"
								@change="changelandscape"></uni-data-select>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="年龄" name="age">
					<view style="width: 100%;height: 35px;border-bottom: 1px solid #FBD2D6; padding-bottom: 10px;">
						<view class="example-body">
							<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.age" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="入志愿说明" name="illustrate" labelWidth='90'>
					<textarea confirm-type='3000' v-model="formData.illustrate"
						style="border: 1px solid #FBD2D6; border-radius: 10px; width: 100%;height: 160px;padding: 5px;"
						class="input" type="text" placeholder="请简单输入志愿说明" />
				</uni-forms-item>

				<view class="flex-row margin-tb-sm text-sm" style="flex-wrap:wrap;">
					<uni-icons type="circle-filled" size="20" class="icon" style="line-height: 17px;" color="#EE3F4D"
						v-if="xieyi" @click="xieyi = !xieyi"></uni-icons>
					<uni-icons type="circle" size="20" class="icon" style="line-height: 17px;" color="#aaa"
						v-if="!xieyi" @click="xieyi = !xieyi"></uni-icons>
					<text class="text-grey1">已阅读并同意</text>
					<!-- <text class="themeColor text-red">《用户协议》</text> -->
					<text class="themeColor text-red" @click="to_privacy(3)">《隐私协议》</text>
					<text class="themeColor text-red" @click="to_privacy(1)">《共享清单》</text>
					<text class="themeColor text-red" @click="to_privacy(2)">《敏感个人信息知情同意书》</text>
				</view>

				<view style="width: 100%;display: flex; justify-content: center;">
					<view class="return-text" @click="returnTo">
						返回
					</view>
					<view v-if="rolestore === null" class="empower-text" @click="getform">
						确定
					</view>
					<view v-if="rolestore === 0" class="empower-text">待审核中</view>
				</view>
			</uni-forms>

			<!-- 协议弹窗 -->
			<uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="bottom" class="">
				<view class="bg-white padding-sm text-df" style="height: 250px;border-radius: 15px 15px 0 0">
					<uni-icons type="closeempty" size="20" style="float: right;" color="#aaa"
						@click="close_xieyi"></uni-icons>
					<view style="text-align: center; margin-top: 25px;" class="text-bold text-df">服务协议及隐私保护</view>
					<view class="margin-top-sm ">
						<text class="text-secondary-xl" style="">为了更好保障您的合法权益，请您阅读并同意</text>
						<text class="themeColor text-red" @click="to_privacy(3)">《隐私协议》</text>
						<text class="themeColor text-red" @click="to_privacy(1)">《共享清单》</text>
						<text class="themeColor text-red" @click="to_privacy(2)">《敏感个人信息知情同意书》</text>
						<text class="text-secondary-xl">。</text>
					</view>
					<button class="agree-btn theme-bg-color text-white margin-top-xl" style=""
						@click="agree_xieyi">同意并继续</button>
				</view>
			</uni-popup>

			<!-- 服务协议弹窗 -->
			<!-- <uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="center" class="" :is-mask-click="false">
				<view class="bg-white padding-sm" style="height:450px;border-radius: 15px; margin: 0 8%; width: 84%;">
					<uni-icons type="closeempty" size="20" style="float: right;" color="#aaa"
						@click="close_xieyi"></uni-icons>
					<view class="  text-df" style="line-height: 50rpx;width: 100%;">
						<view style="text-align: center; " class="text-bold">{{content.content.agreementName}}</view>
						<view class="  text-df padding-top-xs"
							style="line-height: 50rpx;overflow-y: auto; height: 354px;">
							<uv-parse :content="content.content.content"></uv-parse>
						</view>
					</view>
					<view style="width: 100%;display: flex; justify-content: center; margin-top: 12rpx;"
						class="text-df">
						<view class="disagree-text" @click="close_xieyi">
							不同意
						</view>
						<view class="agree-text" @click="agree_xieyi">
							同意
						</view>
					</view>
				</view>
			</uni-popup> -->

		</view>
	</view>
	<loading></loading>
</template>
<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { volunteer } from '../../api/myhome/login';
	import { joinMe, teamlist } from '../../api/myhome/login';
	import { onLoad, onReady } from "@dcloudio/uni-app"
	import { imgURL3 } from "../../api/request"
	import { getTeamInfo, getTreeInfo } from '../../api/team/team';
	// import { getAgreement } from '../../api/agreement/agreement';

	//判断是否申请过
	const isApply = ref(false)

	onLoad(() => {
		//获取站点列表
		get_teamList()
		// teamlist().then(res => {
		// 	team.value = res.data.map(item => ({ value: item.pkId, text: item.teamName }))
		// 	console.log(team.value)
		// })
		volunteer().then(res => {
			console.log('xx', res.data)
			if (res.data != null) {
				//判断是否申请过
				isApply.value = true

				formData.name = res.data.realName
				formData.phone = res.data.phone
				formData.workstate = res.data.company
				formData.Contactaddress = res.data.contactAddress
				formData.illustrate = res.data.joinDescription
				formData.landscape = res.data.politicalIdentityId
				formData.workHour = res.data.workHours
				formData.sex = res.data.sex,
					formData.age = res.data.birthDate,
					formData.teamList = res.data.teamList
				formData.teamList = formData.teamList.map(item => (
					// item.teamId
					item.teamName
				))
				// site_list.value = formData.teamList
				console.log(formData.teamList)
				formData.forte = res.data.forte
				rolestore.value = res.data.status
			} else {
				formData.phone = uni.getStorageSync('phone')
			}
		})
	})
	let rolestore = ref(null);
	// const team = ref([])
	// 定义表单数据和规则
	const formData = reactive({
		name: '',
		phone: '',
		workstate: '',
		Contactaddress: '',
		illustrate: '',
		landscape: null,
		teamList: [],
		age: '',
		sex: null,
		forte: '',
		workHour: '0'
	});

	const rules = ref({
		name: {
			rules: [{ required: true, errorMessage: '请填写姓名' }],
			label: '姓名',
			validateTrigger: 'submit'
		}
		,
		phone: {
			rules: [{ required: true, errorMessage: '请填写个人手机号' }],
			label: '手机号',
			validateTrigger: 'submit'
		},
		// workstate: {
		// 	rules: [{ required: true, errorMessage: '请输入工作单位' }],
		// 	label: '工作单位',
		// 	validateTrigger: 'submit'
		// },
		// Contactaddress: {
		// 	rules: [{ required: true, errorMessage: '请输入联系地址' }],
		// 	label: '联系地址',
		// 	validateTrigger: 'submit'
		// },
		// illustrate: {
		// 	rules: [{ required: true, errorMessage: '请简单输入志愿说明' }],
		// 	label: '入志愿说明',
		// 	validateTrigger: 'submit'
		// },
		// landscape: {
		// 	rules: [{ required: true, errorMessage: '请选择政治面貌' }],
		// 	label: '政治面貌',
		// 	validateTrigger: 'submit'
		// },
		// age: {
		// 	rules: [{ required: true, errorMessage: '请选择年龄' }],
		// 	label: '年龄',
		// 	validateTrigger: 'submit'
		// },
		teamList: {
			rules: [{ required: true, errorMessage: '请选择加入的队伍' }],
			label: '自愿队伍',
			validateTrigger: 'submit'
		}
	});
	const range = reactive([
		{ value: 0, text: "群众" },
		{ value: 1, text: "中共党员" },
		{ value: 2, text: "中共预备党员" },
		{ value: 3, text: "共青团员" },
		{ value: 4, text: "无党派民主人士" },
	])

	const sexrange = reactive([
		{ value: 0, text: "男" },
		{ value: 1, text: "女" }
	])

	// 表单引用
	const formRole = ref(null);

	const xieyi = ref(false)
	const popup = ref(null)

	//弹窗次数
	// const num = ref(3)
	const agree_xieyi = () => {
		xieyi.value = true
		popup.value.close()
		//三次弹窗
		// num.value = num.value - 1
		// if (num.value <= 0) {
		// 	xieyi.value = true
		// } else {
		// 	getContent()
		// 	setTimeout(() => {
		// 		popup.value.open()
		// 	}, 500)
		// }
	}

	const close_xieyi = () => {
		popup.value.close()
		// uni.switchTab({
		// 	url: '/pages/index/index'
		// })
	}

	//站点列表
	const site_list = ref([])
	//拿到选择的志愿者队伍
	let team_list = reactive([])

	//获取站点列表
	const get_teamList = () => {
		getTreeInfo().then(res => {
			site_list.value = res.data
			console.log('111111111110', res.data)
		})
	}
	const treePicker = ref(null)

	//监听选择（ids为数组）
	const selectChange = (list) => {
		console.log('111111111', list)
		team_list = JSON.parse(JSON.stringify(list))
		//拿到队伍真实id
		getRealId()
	}

	//拿到队伍真实id
	const getRealId = () => {
		console.log('hh', team_list)
		for (let i = 0; i < team_list.length; i++) {
			console.log(team_list[i])
			getTeamInfo(team_list[i].name).then(res => {
				console.log('真实id', res.data.pkId)
				formData.teamList.push(res.data.pkId)
			})
		}

	}


	// 获取表单数据
	const getform = () => {
		// uni.showLoading();
		formRole.value.validate().then(async ({ valid, errors } : any) => {
			if (valid) {
			} else {
				let token = uni.getStorageSync("token")
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: "error"
					})
				} else {
					if (xieyi.value) {
						//验证成功
						joinMe({
							realName: formData.name,
							telephone: formData.phone,
							company: formData.workstate,
							contactAddress: formData.Contactaddress,
							applyDescription: formData.illustrate,
							politicalId: formData.landscape,
							workHour: formData.workHour,
							sex: formData.sex,
							birthDate: formData.age,
							teamIdList: formData.teamList,
							forte: formData.forte

						}).then(res => {
							if (res.code === 200) {
								uni.showToast({
									title: '申请提交成功',
									icon: "success"
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/me/me'
									})
								}, 1000)
							}
						})
					} else {
						// num.value = 3
						// getContent()
						popup.value.open()
					}
				}
			}
		})
	}
	const changelandscape = () => {
		console.log(formData.teamList)
	}
	// 返回到其他页面
	const returnTo = () => {
		uni.switchTab({
			url: '/pages/me/me'
		});
	};

	//跳转隐私协议
	const to_privacy = (e) => {
		uni.navigateTo({
			url: '/pages/agreement/index?e=' + e
		})
	}

	// onReady(() => {
	// 		//请求协议内容
	// 		getContent()
	// 		setTimeout(() => {
	// 			if (rolestore.value === null) {
	// 				popup.value.open()
	// 			}
	// 		}, 500)
	// 	})
	//协议内容
	// const content = reactive({
	// 	content: {
	// 		agreementName: "隐私政策",
	// 		agreementStatus: "1",
	// 		content: ''
	// 	},
	// 	title: [
	// 		'共享清单',
	// 		'敏感个人信息知情同意书',
	// 		'隐私政策'
	// 	]
	// })
	// //获取协议内容
	// const getContent = () => {
	// 	getAgreement(content.title[num.value - 1]).then(res => {
	// 		// console.log(JSON.stringify(res.data))
	// 		if (res.code == 200) {
	// 			content.content.agreementName = res.data.agreementName
	// 			content.content.agreementStatus = res.data.agreementStatus
	// 			content.content.content = res.data.content
	// 		}
	// 	})
	// }
</script>

<style>
	.empower-text {
		height: 40px;
		width: 55%;
		margin-left: 3%;
		border-radius: 5px;
		background-color: #EE3F4D;
		text-align: center;
		color: #fff;
		font-size: 18px;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.return-text {
		height: 40px;
		width: 30%;
		border-radius: 5px;
		background-color: rgba(243, 118, 128, 0.51);
		text-align: center;
		color: #EE3F4D;
		font-size: 18px;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.agree-text {
		height: 36px;
		width: 40%;
		margin-left: 8%;
		border-radius: 5px;
		background-color: #EE3F4D;
		text-align: center;
		color: #fff;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.disagree-text {
		height: 36px;
		width: 40%;
		border-radius: 5px;
		background-color: #fff;
		text-align: center;
		color: #EE3F4D;
		border: 1px solid #EE3F4D;
		align-items: center;
		display: flex;
		justify-content: center;
	}
</style>